/** @jsxImportSource @emotion/react */
import * as React from "react";
import {Text, InputLine, TextArea, Input,} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, SelectInput, useItemInputControl, 现场结果选,
} from "../common/base";
import {useMeasureInpFilter} from "../common/hooks";
import {objNestSet, } from "../../common/tool";

interface Props extends InternalItemProps {
    label?: string;
    titles?: any[];
}

//常见模型：{特别的配置 } 第三个字段标识：是否标题也是手工录入的？
export const item宏观检验o = [
    ['锅筒', {t: '锅 筒', pr: '结构检验', span: 5},],
    ['封头', {t: '封 头',},],
    ['管板', {t: '管 板',},],
    ['炉胆', {t: '炉 胆',},],
    ['回燃', {t: '回燃室',},],
    ['喉管', {t: '喉 管', span: 3}],
    ['集箱', {t: '集 箱',}],
    ['汽管', {t: '水（汽）管'}],
    ['烟管', {t: '烟 管', span: 6}],
    ['拉撑', {t: '拉撑件'}],
        //编辑器拆分两个区域
    ['省煤', {t: '省煤器'}],
    ['过热', {t: '过热器'}],
    ['管座', {t: '各种管座', pr: '各种管座', span: 1} , true],
    ['手孔', {t: '人手孔圈'}],
    ['冲天', {t: '冲天管'}],
    ['炉门', {t: '炉门圈'}],
    ['下脚', {t: '下脚圈'}],
    ['分离', {t: '外置分离器'}],
    ['炉片', {t: '铸铁炉片'}],
        //只有一行的增加项目：需要额外输入名称的： 不能设置t:‘’
    ['部件', {t: undefined } ]
];
export const itemA元件上: string[] = ['附说明'];
item宏观检验o.forEach(([name, title, initIsp], i: number) => {
    if(i>=10)    return;
    itemA元件上.push(name as string);
});
const 检验结果选=['符合要求','基本符合要求','不符合要求'];
export const 等级评定选=['1级','2级','3级','4级'];
export const 检查结果选=["√","○","－","×"];
export const 元件检查项目=[['裂纹','l'],['起槽','q'],['过热','g'],['变形','b'],['泄漏','x'],['腐蚀','f'],['磨损','m'],['水垢','s']];
/**内部检验报告（附页）： 上半部分 元部件检查
 * */
export const MetacomponM =
React.forwardRef((
    {children, show, alone = true, redId, nestMd, label, titles}: Props, ref
) => {
    const [getInpFilter] = useMeasureInpFilter(null, itemA元件上,);
    const {inp, setInp} = useItemInputControl({ref});
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                            nestMd={nestMd} alone={alone} label={label!}>
             <Text variant="h5">{label}：</Text>
             { item宏观检验o.map(([name,conf,]: any, i:number) => {
                if(i>=10)    return null;
                const {t: title,}=conf;
                return (<React.Fragment key={i}>
                    元部件{1+i} -<Text variant="h5" css={{display: 'inline-flex'}} >{title}</Text>：
                    <div css={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
                        { 元件检查项目.map(([ititle,subf], m:number) => {
                            return <div key={m} css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                                {ititle}
                                <SelectInput value={ inp?.[name]?.[subf] ||''}  list={检查结果选}  nMinW
                                         style={{display: 'inline-flex', width: '5rem'}}
                                     onChange={e => objNestSet(name,subf,e.currentTarget.value||undefined, inp, setInp) }/>
                            </div>
                        })}
                    </div>
                </React.Fragment>);
             })}
        <Text variant="h5">本（附页）的说明</Text>
        <TextArea value={inp?.附说明 || ''} rows={7}
                  onChange={e => setInp({...inp, 附说明: e.currentTarget.value || undefined})}/>
    </InspectRecordLayout>;
});

//最简化的配置 [名字，标题] ; 分项目固定个数的。
export const 附页其它项目=[
    ['炉排','炉排'],['钢架','钢架'],['保温','保温'],['燃烧','燃烧器'],['分缸','分汽(水)缸'],['排污','排污系统'],
    ['拱墙','拱墙'],['管阀','管道阀门'],['其它','其它']
];
export const itemA元件它: string[] = [];
item宏观检验o.forEach(([name, title, initIsp], i: number) => {
    if(i>=10)
        itemA元件它.push(name as string);
});
for(let [name,desc] of 附页其它项目){
    itemA元件它.push(name);
}
/**内部检验报告（附页）： 下半部分的 元部件检查 + 其他检验项目
 * */
export const MetacomponOther =
React.forwardRef((
    {children, show, alone = true, redId, nestMd, label, titles}: Props, ref
) => {
    const [getInpFilter] = useMeasureInpFilter(null, itemA元件它,);
    const {inp, setInp} = useItemInputControl({ref});
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        {item宏观检验o.map(([name, conf,]: any, i: number) => {
            if (i < 10) return null;
            const {t: title,} = conf;
            return (<React.Fragment key={i}>
                元部件{i + 1} -<Text variant="h5"
                                     css={{display: 'inline-flex'}}>{i < 19 ? title : inp?.[name]?.t}</Text>：
                <div css={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
                    {元件检查项目.map(([ititle, subf], m: number) => {
                        return <div key={m}
                                    css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                            {ititle}
                            <SelectInput value={inp?.[name]?.[subf] || ''} list={检查结果选} nMinW
                                         style={{display: 'inline-flex', width: '5rem'}}
                                         onChange={e => objNestSet(name, subf, e.currentTarget.value || undefined, inp, setInp)}/>
                        </div>
                    })}
                </div>
            </React.Fragment>);
        })}
        {/*固定方式增加一行的*/}
        <Text variant="h5">受压元部件检查可增加项目名称（第20项）：</Text>
        <InputLine label={'第20项名称'}>
            <Input value={(inp?.部件?.t) || ''}
                   onChange={e => objNestSet('部件', 't', e.currentTarget.value || undefined, inp, setInp)}/>
        </InputLine>
        <hr/>
        其他检验项目：
        <div css={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
            {附页其它项目.map(([name, desc]: any, i: number) => {
                return (
                    <div key={i} css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                        <Text variant="h5" css={{display: 'inline-flex'}}>{desc}</Text>：
                        <SelectInput value={inp?.[name] || ''} list={检查结果选} nMinW={true}
                                     style={{display: 'inline-flex', width: '5rem'}}
                                     onChange={e => setInp({...inp, [name]: e.currentTarget.value || undefined})}/>
                    </div>
                );
            })}
        </div>
    </InspectRecordLayout>;
});

